<div class="fui-timepicker-content">
  <div class="fui-timepicker-combobox">
    <div class="fui-timepicker-select" *ngIf="allowHour" #hourListInstance>
      <ul>
        <ng-container *ngFor="let hour of hourList; let i = index">
          <li
            [ngClass]="hour.name"
            [class.selected]="hour.index === selectedHour"
            (click)="selectHour(hourListInstance, hour.index)"
          >
            {{hour.name}}
          </li>
        </ng-container>
      </ul>
    </div>
    <div class="fui-timepicker-select" *ngIf="allowMinute" #minuteListInstance>
      <ul>
        <ng-container *ngFor="let minute of minuteList; let i = index">
          <li
            [ngClass]="minute.name"
            [class.selected]="minute.index === selectedMinute"
            (click)="selectMinute(minuteListInstance, minute.index)">
            {{minute.name}}
          </li>
        </ng-container>
      </ul>
    </div>
    <div class="fui-timepicker-select" *ngIf="allowSecond" #secondListInstance>
      <ul>
        <ng-container *ngFor="let second of secondList; let i = index">
          <li
            [ngClass]="second.name"
            [class.selected]="second.index === selectedSecond"
            (click)="selectSecond(secondListInstance, second.index)">
            {{second.name}}
          </li>
        </ng-container>
      </ul>
    </div>
  </div>
</div>
